import React, { useState, useEffect } from 'react';
import { Form, Button, Col, Row } from 'antd';
import { UpOutlined, DownOutlined } from '@ant-design/icons';
import ButtonsList from '../ButtonsList';
// plugins of Search
import SearchInput from './input';
import SearchSelect from './select';
import SearchTree from './tree';
import SearchDatetime from './datetime';

import style from './index.less';

// 搜索项类型定义
const SearchItem = {
  input: SearchInput,
  select: SearchSelect,
  treeSelect: SearchTree,
  datetime: SearchDatetime,
};

const SeniorSearch = (props) => {
  const DEFAULTFORMNUM = props.defaultFormNum || 2; // 默认展示的表单数，剩下都在高级搜索下面
  // const dispatch = useDispatch();
  const [form] = Form.useForm();
  const {
    searchConfig,
    handleSearchFn,
    handleResetFn,
    initValue,
    rightButtons,
    leftCustomComp = null,
  } = props;
  const [showKey, setShowKey] = useState(false);

  useEffect(() => {
    const FormValue = {};
    searchConfig.forEach((item) => {
      FormValue[item?.field] = null;
      // select mode="multiple"选择器多选默认值应为[]
      if (item?.type === 'select' && item?.selectConfig?.mode === 'multiple') {
        FormValue[item?.field] = [];
      }
    });
    if (Object.keys(initValue).length) {
      Object.keys(initValue).forEach((key) => {
        FormValue[key] = initValue[key];
      });
    }
    form.setFieldsValue(FormValue);
  }, [initValue]);

  const onChange = () => {
    // console.log(searchConfig);
  };

  function getSearchItem(item, layout) {
    return (
      <Col span={6}>
        <Form.Item name={item.field} label={item.label} {...layout} key={item.field}>
          {SearchItem[item.type].render(item, onChange) || SearchItem.input.render(item, onChange)}
        </Form.Item>
      </Col>
    );
  }
  // 搜索
  const onSearch = (values) => {
    // 执行调用组件地方传入的搜索触发的函数
    if (handleSearchFn) {
      handleSearchFn(values);
    }
  };
  // 重置
  const onReset = () => {
    form.resetFields();

    // 执行调用组件地方传入的重置触发的函数
    if (handleResetFn) {
      handleResetFn();
    }
  };
  return (
    <div>
      <Form
        form={form}
        name="advanced_search"
        labelCol={{ flex: '110px' }}
        wrapperCol={{ flex: 1 }}
        className={style.seniorSearchform}
        onFinish={onSearch}
      >
        {/* //csp-mng-components-senior-search-index-defaultForm */}
        <div className={style.wholeForm}>
          {leftCustomComp}
          <div className={style.formRight}>
            <Row gutter={[8, 0]}>
              {searchConfig.length > 0 && (
                <>
                  {searchConfig
                    .slice(0, DEFAULTFORMNUM)
                    .map((item) => getSearchItem(item, { wrapperCol: { span: 12 } }))}
                  <Col span={searchConfig.length > DEFAULTFORMNUM ? 8 : 6}>
                    <Button
                      className={style.formBtn}
                      type="primary"
                      htmlType="submit"
                      style={{ marginRight: '8px'}}
                    >
                      搜索
                    </Button>
                    <Button className={style.formBtn} onClick={onReset}>
                      重置
                    </Button>
                    {/* 超过默认展示个数才显示高级搜索的按钮 */}
                    {searchConfig.length > DEFAULTFORMNUM && (
                      <Button
                        type="link"
                        onClick={() => {
                          setShowKey(!showKey);
                        }}
                        className="dt-custom-theme-color"
                        style={{
                          backgroundColor: 'transparent',
                          borderColor: 'transparent',
                          textDecoration: 'none',
                        }}
                      >
                        高级搜索 {showKey ? <UpOutlined /> : <DownOutlined />}
                      </Button>
                    )}
                  </Col>
                </>
              )}
            </Row>

            {rightButtons && rightButtons.length > 0 && (
              <ButtonsList buttonsConfig={rightButtons} className={style.rightButtons} />
            )}
            {searchConfig.length > DEFAULTFORMNUM && showKey && (
              <Row gutter={[8, 10]} style={{ margin: '5px -4px 5px' }}>
                {searchConfig
                  .slice(DEFAULTFORMNUM)
                  .map((item) => getSearchItem(item, { wrapperCol: { span: 12 } }))}
              </Row>
            )}
          </div>
        </div>
      </Form>
    </div>
  );
};

export default SeniorSearch;
